<template>
  <div class="box">
    <div class="top">
      <span class="iconfont icon-chevron-thin-left" @click="getlog()"></span>
      <p>我的收藏</p>
    </div>
    <ul class="deflist">
      <p v-if="flag">不好意思，您还没有收藏商品</p>
      <li v-for="(item, index) in data" :key="index">
        <img :src="item.goods_url" alt="" />
        <div class="shopda">
          <p style="font-weight: 600; font-size: 0.8rem; color: #121212">
            {{ item.goods_name }}
          </p>
          <p>{{ item.goods_people }} 人收藏</p>
          <p style="font-weight: 600">￥{{ item.price }}</p>
          <p>
            <span
              @click="carts(item, index)"
              style="
                width: 1.5rem;
                height: 1.5rem;
                border: 1px solid #f5f5f5;
                border-radius: 1rem;
                line-height: 1.5rem;
                text-align: center;
                float: left;
              "
              >+</span
            >
            <span style="width: 6rem" @click="remos(item, index)">
              <van-button
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                style="
                  width: 4rem;
                  border-radius: 2rem;
                  height: 1.5rem;
                  float: right;
                "
              >
                移除
              </van-button>
            </span>
          </p>
        </div>
      </li>
    </ul>
    <div class="btn">
      ---- <span class="iconfont icon-shoucang"> 你可能还喜欢</span> ----
    </div>
    <!-- 列表数据 -->
    <ul class="foot">
      <li v-for="(item, index) in shopdata" :key="index" @click="particuer(item)">
        <img :src="item.goods_url" alt="" />
        <span class="bbb">{{ item.goods_name }}</span>
        <p>
          <span style="color: #fa4f04">￥{{ item.price }}</span>
          <span style="font-size: 0.3rem">{{ item.goods_volume }}人购买</span>
        </p>
      </li>
    </ul>
    <!-- <div style="width: 100%">
      <van-loading type="spinner" />
    </div> -->
  </div>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
export default {
  data() {
    return {
      data: [],
      shopdata: [],
      flag: false,
    };
  },
  async created() {
    //收藏的数据
    let res = await API.hcillse({
      uid: JSON.parse(localStorage.getItem("token")).uid,
    });
    this.data = res.data;
    if (this.data.length === 0) {
      this.flag = true;
    } else {
      this.flag = false;
    }
    localStorage.setItem("cont", this.data.length);
    //猜我喜欢的数据
    let res1 = await API.cillseers({
      num: 6,
    });
    this.shopdata = res1.data;
  },
  methods: {
    //   点击返回
    getlog() {
      this.$router.go(-1);
    },
    // 点击加号
    async carts(item, index) {
      console.log(item);
      await API.cartpes({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        item: item,
      });
    },
    // 点击移除
    async remos(item, index) {
      await API.remomo({
        uid: JSON.parse(localStorage.getItem("token")).uid,
        goods_id: item.goods_id,
      });
      let res = await API.hcillse({
        uid: JSON.parse(localStorage.getItem("token")).uid,
      });
      this.data = res.data;
      if (this.data.length === 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    //点击列表到详情
    particuer(item){
      // console.log(item)
      this.$router.push({path:'/details',query:item})
    }
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  overflow-y: auto;
  padding-top: 3rem;
}
.box .top {
  width: 100%;
  height: 3rem;
  background: #f5f5f5;
  margin-bottom: 0.5rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.top span {
  width: 10%;
  float: left;
  line-height: 3rem;
  margin-left: 0.3rem;
  font-weight: 600;
}
.top p {
  margin-left: 41%;
  line-height: 3rem;
  font-weight: 600;
}
.box .deflist {
  width: 96%;
  margin: 0 0 0 2%;
  min-height: 8rem;
}
.deflist li {
  width: 100%;
  height: 8rem;
  margin-bottom: 1rem;
}
.deflist li img {
  width: 8rem;
  height: 8rem;
  float: left;
}
.deflist li .shopda {
  width: 13rem;
  float: left;
  margin-left: 1rem;
}
.shopda p {
  width: 100%;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #a4a4a4;
}
.box .btn {
  color: #fa4f04;
  width: 100%;
  text-align: center;
}
.box .foot {
  width: 92%;
  height: 19rem;
  margin: 1rem 0 0 4%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* overflow-y: auto; */
}
.foot li {
  width: 48%;
  height: 14rem;
  margin-bottom: 0.5rem;
}
.foot li img {
  width: 100%;
  height: 9rem;
}
.foot li .bbb {
  width: 100%;
  text-align: center;
  float: left;
  margin-top: 0.5rem;
  font-size: 0.7rem;
}
.foot li p {
  width: 100%;
  float: left;
  text-align: center;
}
</style>